<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">

        <!-- 头部：用了一个行列布局 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px;width: 100%;">

          <el-col :span="20">
            <span>辣条AI公司</span>
          </el-col>

          <el-col :span="4">
            <el-row type="flex">
              <!-- 两个内容 -->
              <el-col :span="12">老6</el-col>
              <el-col :span="12">

                <!-- 下拉菜单：  给公司添加 子部门  '' -->
                <el-dropdown @command="handle($event,{ id: ''})">
                  <span>
                    操作<i class="el-icon-arrow-down" />
                  </span>

                  <!-- 下拉菜单 -->
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>

              </el-col>
            </el-row>
          </el-col>

        </el-row>

        <!-- 树：-->
        <el-tree :data="treeData" :props="props" default-expand-all>

          <template slot-scope="{ data }">

            <!-- 插槽：设置每一行row 里面有下拉菜单！ -->
            <el-row type="flex" justify="space-between" align="middle" style="height: 40px;width: 100%;">
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex">
                  <!-- 两个内容 -->
                  <el-col :span="12">{{ data.manager }}</el-col>
                  <el-col :span="12">

                    <el-dropdown @command="handle($event,data)">
                      <span>操作<i class="el-icon-arrow-down" /></span>

                      <!-- 下拉菜单 -->
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                        <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                        <el-dropdown-item command="del">删除部门</el-dropdown-item>
                      </el-dropdown-menu>

                    </el-dropdown>

                  </el-col>
                </el-row>
              </el-col>
            </el-row>

          </template>

        </el-tree>

        <!-- 弹窗： -->
        <el-dialog :title="title" :visible.sync="showDialog" @close="close">

          <el-form ref="deptForm" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="部门名称" prop="name">
              <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
            </el-form-item>
            <el-form-item label="部门编码" prop="code">
              <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
            </el-form-item>
            <el-form-item label="部门负责人" prop="manager">

              <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
                <el-option v-for="item in epyData" :key="item.id" :label="item.username" :value="item.username" />
              </el-select>

            </el-form-item>
            <el-form-item label="部门介绍" prop="introduce">
              <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="submit">确定</el-button>
              <el-button size="small" @click="showDialog=false">取消</el-button>
            </el-form-item>
          </el-form>

        </el-dialog>

      </el-card>
    </div>
  </div>

</template>

<script>
// API
import { list, del, add, upd } from '@/api/departments'
import { list as epyList } from '@/api/employees' // 改名  epyList()
// import * as epy from '@/api/employees'   // 把内部全部导出集中到一个变量epy   epy.list()

// 导入方法
import { arrToTree } from '@/utils/index'
export default {
  data() {
    const validateName = (rule, value, callback) => {
      if (this.title === '编辑部门' && value === this.acData.name) {
        callback()
        return
      }
      const sons = this.allData.filter(item => item.pid === this.acData.id)
      const key = sons.some(item => item.name === value)
      if (key) {
        callback(new Error('该部门名称已经存在'))
      } else {
        callback()
      }
    }

    // 编号校验
    const validateCode = (rule, value, callback) => {
      // 编辑：如果现在是编辑模式，且 用户输入值value 和 我们当前正在编辑对象里面code一样！我们没改！
      if (this.title === '编辑部门' && value === this.acData.code) {
        callback()
        return
      }
      const key = this.allData.some(item => item.code === value)
      if (key) {
        callback(new Error('该部门code已经存在'))
      } else {
        callback()
      }
    }

    return {
      // ***************************************树列表
      treeData: [], // 树状数据
      allData: [], // 初始化数组
      props: {
        // 本来要求名字：后面后台生气改了的名字  映射对应！依据文档！
        label: 'name',
        children: 'sons'
      },

      // ***************************************弹窗
      showDialog: false, // 默认看不见,
      acData: null, // active：当前的，当前操作的数据
      title: '',

      // ***************************************form
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: ['blur', 'change'] },
          { validator: validateName, trigger: ['blur', 'change'] } // 自定义校验
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: ['blur', 'change'] },
          { validator: validateCode, trigger: ['blur', 'change'] } // 自定义校验
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: ['blur', 'change'] }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: ['blur', 'change'] }
        ]
      },
      epyData: [] // 负责人数据
    }
  },
  created() {
    this.get_list() // tree
    this.get_epyList() // 负责人数据
  },
  methods: {
    // ****************************************树
    // 获取树列表数据
    async get_list() {
      // 1、获取数据
      const { data } = await list()

      this.allData = data.depts
      // console.log(data.depts)

      // 2、设置
      this.treeData = arrToTree(data.depts, '')
    },
    // 下拉菜单操作
    handle(command, data) {
      if (command === 'add') {
        this.showDialog = true
        this.title = '新增部门'

        this.acData = data // 把当前操作哪个部门的数据存下
      }

      if (command === 'edit') {
        this.showDialog = true //
        this.title = '编辑部门'

        this.acData = data
        this.form = this.acData
      }

      // 删除
      if (command === 'del') {
        this.$confirm('您确认删除此部门么?', '删除提示')
          .then(async() => {
            await del(data.id)
            this.$message.success('删除成功')
            this.get_list()
          })
          .catch(() => {})
      }
    },
    // ****************************************form
    // form表单：负责人数据
    async get_epyList() {
      const { data } = await epyList()
      this.epyData = data
    },
    // 提交数据
    submit() {
      this.$refs.deptForm.validate(async(valid) => {
        if (valid) { // 整体通过
          // 1、api接口 判断
          if (this.title === '新增部门') {
            await add({
              ...this.form,
              pid: this.acData.id // 当前给谁 添加子部门
            })
            this.$message.success('新增成功')
          }

          if (this.title === '编辑部门') {
            await upd(this.form)
            this.$message.success('编辑成功')
          }

          // 2、弹窗关闭
          this.showDialog = false
          // 3、树需要重新加载
          this.get_list()
        } else {
          return false
        }
      })
    },
    // 关闭弹窗
    close() {
      // form重置：方法
      // 数据重置
      this.form = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      }

      // 表单重置：验证提醒红色
      this.$refs.deptForm.resetFields()
    }

  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 30px;
  font-size:14px;
}

.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}

</style>
